<template>
  <div class="config-graph-div">
    <modal-dialog :width="width" :height="height" @close="$close">
      <div slot="header" class="c-header">{{ title }}</div>
      <div slot="body" class="c-body">
        <el-form ref="form" :model="form" label-width="70px">
          <el-form-item label="文档名称">
            <el-input v-model="form.name" size="mini" />
          </el-form-item>
          <el-form-item label="设 计 人">
            <el-input v-model="form.author" size="mini" />
          </el-form-item>
          <!-- <el-form-item label="设计日期">
            <el-input v-model="form.date" size="mini" />
          </el-form-item>-->
          <el-form-item label="节点宽度">
            <el-input v-model="form.nodewidth" size="mini" />
          </el-form-item>
          <el-form-item label="节点高度">
            <el-input v-model="form.nodeheight" size="mini" />
          </el-form-item>
          <el-form-item label="字体大小">
            <el-input v-model="form.fontsize" size="mini" />
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input v-model="form.comment" size="mini" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button type="text" @click.native="onSubmit">确认</el-button>
        <el-button type="text" @click.native="onCancel">取消</el-button>
      </div>
    </modal-dialog>
  </div>
</template>

<script>
import ModalDialog from '@/components/ModalDialog'
import { mapState } from 'vuex'

export default {
  components: {
    ModalDialog
  },
  props: {
    width: {
      type: Number,
      required: false,
      default: 280
    },
    height: {
      type: Number,
      required: false,
      default: 400
    },
    title: {
      type: String,
      required: false,
      default: '系统设置'
    },
    msg: {
      type: String,
      default: '默认欢迎'
    }
  },
  data() {
    return {
      form: {
        name: '新建文档',
        author: '安全人',
        date: '',
        comment: '',
        nodewidth: 36,
        nodeheight: 30,
        fontsize: 12
      }
    }
  },
  computed: {
    ...mapState('editor/diagram', {
      config: 'config'
    })
  },
  created() {
    this.form.name = this.config.document.name
    this.form.author = this.config.document.author
    // this.form.date = this.config.document.date
    this.form.comment = this.config.document.comment
    this.form.nodewidth = this.config.node.size[0]
    this.form.nodeheight = this.config.node.size[1]
    this.form.fontsize = this.config.node.style.fontSize
  },
  methods: {
    resetForm() {
      // 重置表单
      this.$refs['form'].resetFields()
    },
    // 取消
    onCancel() {
      // 关闭对话框
      this.$close()
      // 重置表单
      this.resetForm()
    },
    // 确定
    onSubmit() {
      // 关闭对话框
      this.form.name = this.form.name.replace(/^\s+|\s+$/g, '')
      this.$close(this.form)
    }
  }
}
</script>

<style lang="scss">
.config-graph-div {
  // .dialog-header {
  //   .c-header {
  //     font-size: 16px;
  //     text-align: center;
  //   }
  // }
  .dialog-body {
    // @import '../../style/form.scss';
    .c-body {
      padding: 10px 10px !important;

      // .el-color-predefine__color-selector {
      //   border: 0.5px solid gray !important;
      // }
    }
  }
  .dialog-footer {
    @import '../../style/form.scss';
    .el-button {
      font-size: 16px !important;
    }
  }
}
</style>
